<template>
  <div class="dashboard-editor-container">
    <el-skeleton style="width: 100%" animated :loading="!showData" >
      <template slot="template">
        <el-row :gutter="20" style="width: 100%;" class="statistics-group">
            <el-skeleton-item variant="rect" style="width: 100%;height: 500px" />
        </el-row>
      </template>
      <template>
        <el-card>
          <el-row class="home-approve">
            <el-col :span="12">
              <router-link to="/approval-list/index/check">
                <i class="el-icon-warning-outline uncheck"></i>
                <span class="uncheck">待处理({{check_num}})</span>
              </router-link>
            </el-col>
            <el-col :span="12">
              <router-link to="/approval-list/index/complete">
                <i class="el-icon-circle-check check"></i>
                <span class="check">已处理</span>
              </router-link>
            </el-col>
          </el-row>
        </el-card>
        <div style="margin-bottom: 30px"></div>
        <el-card>
          <el-row style="width: 100%" type="flex" justify="space-between" align="middle">
            <el-tag type="info" size="medium">**近三天填报情况</el-tag>
            <router-link to="/count-enter/normal">
              <span class="home-subtitle">查看更多<i class="el-icon-d-arrow-right"/></span>
            </router-link>
          </el-row>
          <el-table :data="reportData"
                    style="width: 100%"
                    element-loading-text="报表生成中..."
                    element-loading-spinner="el-icon-loading">
            <el-table-column v-for="(col,idx) in reportCols" :key="idx" :prop="col.prop" :label="col.label" :type="col.type" :width="col.width" :fixed="col.fixed" align="center">
              <template slot-scope="scope">
                <el-tag type="success" size="mini" v-if="typeof scope.row[col.prop]!=='string'&&scope.row[col.prop]">已填写</el-tag>
                <el-tag type="danger" size="mini" v-else-if="!scope.row[col.prop]">未填写</el-tag>
                <el-tag type="info" size="mini" v-else>{{scope.row[col.prop]}}</el-tag>
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </template>
    </el-skeleton>
    <div style="margin-bottom: 20px"></div>
    <el-skeleton style="width: 100%" :loading="!showChart" animated>
      <template slot="template">
        <el-row :gutter="20" style="width: 100%;height: 360px">
          <el-col class="chart-cell" :xs="24" :sm="12" v-for="(item,index) in tempTbData" :key="index">
            <el-skeleton-item variant="image" style="width: 100%; height: 300px;"/>
          </el-col>
        </el-row>
        <div style="margin-bottom: 30px"></div>
        <el-row :gutter="20" style="width: 100%;height: 360px">
          <el-col class="chart-cell" :xs="24" :sm="12" v-for="(item,index) in tempHbData" :key="index">
            <el-skeleton-item variant="image" style="width: 100%; height: 300px;"/>
          </el-col>
        </el-row>
      </template>
      <template>
        <el-row  style="width: 100%;height: 360px">
          <el-col class="chart-cell" :xs="24" :sm="12" v-for="(item,index) in tbData" :key="index">
            <el-card style="width: 100%">
              <line-bar-chart ref="tbChart" :chart-data="item" :line-color="lineColor" :bar-color="barColor" />
            </el-card>
          </el-col>
        </el-row>
        <el-row  style="width: 100%;height: 360px">
          <el-col class="chart-cell" :xs="24" :sm="12" v-for="(item,index) in hbData" :key="index">
            <el-card style="width: 100%">
              <line-bar-chart ref="hbChart" :chart-data="item" :line-color="lineColor" :bar-color="barColor" />
            </el-card>
          </el-col>
        </el-row>
        <div style="margin-bottom: 20px"></div>
      </template>
    </el-skeleton>
  </div>
</template>

<script>
import CountTo from 'vue-count-to'
import LineBarChart from "@/views/bigdata/analysis/LineBarChart"
import analyApi from '@/api/analysis'
import homeApi from '@/api/article'
import {mapGetters} from 'vuex'
export default {
  name: 'DashboardNormal',
  components:{
    CountTo,
    LineBarChart
  },
  computed:{
    ...mapGetters([
      'check_num'
    ])
  },
  data() {
    return {
      lineColor:'#d5d730',
      barColor:'#1890ff',
      showData:false,
      reportCols:[],
      reportData: [],
      totalData:[],
      showChart:false,
      tbData:null,
      hbData:null,
      tempTbData:[{name:'tb-c1'},{name:'tb-c2'}],
      tempHbData:[{name:'hb-c1'},{name:'hb-c2'}]
    }
  },
  created() {
    this.loadTotalData()
    this.loadChartData()
  },
  methods: {
    loadTotalData(){
      this.showData=false
      homeApi.homeSummary().then(res=>{
        const tableData = this.convertData(res.data)
          this.reportCols = tableData[0]
          setTimeout(()=>{
            this.reportData = tableData[1]
            this.showData=true
          },200)
        })
    },
    loadChartData() {
      this.showChart=false
      analyApi.analysisTbRatio({}).then(res=>{
        const dataArr =res.data
        this.tbData = this.convertChartData(dataArr)
        this.showChart=true
      })
      analyApi.analysisHbRatio({}).then(res=>{
        const dataArr = res.data
        this.hbData = this.convertChartData(dataArr,'环比')
        this.showChart=true
      })
    },
    convertChartData(dataArr,type='同比'){
      let chartsOpts = []
      for (let cdata of dataArr){
        let chartOpt = {
          names:[cdata.name,type],
          messures:[cdata.messure,'%'],
          xValues:Object.keys(cdata.data),
          yValues:[Object.values(cdata.data), Object.values(cdata.ratio)]
        }
        chartsOpts.push(chartOpt)
      }
      return chartsOpts
    },
    convertData(dataList){
        let tbCols=[]
        let tbArr=[]
        dataList.header.forEach(hd=>{
          tbCols.push({
            prop:hd.en_name,
            label:hd.cn_name,
            children:[]
          })
        })
        for (let data of dataList.data){
          let tbEntity = {}
          for (let tag in data){
            tbEntity[tag] = data[tag]
          }
          tbArr.push(tbEntity)
        }
        return [tbCols,tbArr]
      },
  }
}
</script>

<style lang="scss" scoped>
.dashboard-editor-container {
  padding: 20px;
  /*background-color: rgb(240, 242, 245);*/
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  .chart-cell{
    padding: 0 10px;
    height: 350px;
  }

  .home-subtitle{
    cursor: pointer;
    color: #5a5e66;
    font-size: 12px;
    &:hover{
      text-decoration: #5a5e66 underline;
    }
  }

  .home-approve{
    width: 100%;
    text-align: center;
    cursor: pointer;
    font-size: large;
    font-weight: bold;
    & .uncheck{
      margin-left: 10px;
      color: #d3d705;
      &:hover{
        text-decoration:#d3d705 underline;
      }
    }
    & .check{
      color: #4cd964;
      margin-left: 10px;
      &:hover{
        text-decoration:#4cd964 underline;
      }
    }
  }

  .statistics-group {
    padding: 10px;
    margin-top: 10px;

    .el-col-lg-4-8 {
      width: 20%;
    }

    .statistics-panel-col {
      margin-bottom: 20px;
    }

    .statistics-panel {
      height: 120px;
      cursor: pointer;
      font-size: 12px;
      position: relative;
      overflow: hidden;
      color: #666;
      background: #fff;
      box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
      border-color: rgba(0, 0, 0, .05);

      &:hover {
        .statistics-panel-icon-wrapper {
          color: #fff;
        }

        .icon-lightning {
          background: #1890ff;
        }

        .icon-rubbit {
          background: #d2e62f;
        }

        .icon-turbine {
          background:#34bfa3;
        }

        .icon-qushi {
          background: #62125e;
        }
        .icon-water{
          background: #36a3f7;
        }
      }

      .icon-lightning {
        color: #1890ff;
      }

      .icon-rubbit {
        color: #d2e62f;
      }

      .icon-turbine {
        color: #34bfa3;
      }

      .icon-qushi {
        color: #62125e;
      }
      .icon-water{
        color: #36a3f7;
      }

      .statistics-panel-icon-wrapper {
        float: left;
        margin: 14px 0 0 14px;
        padding: 16px;
        transition: all 0.38s ease-out;
        border-radius: 6px;
      }

      .statistics-panel-icon {
        float: left;
        font-size: 38px;
      }

      .statistics-panel-description {
        float: right;
        font-weight: bold;
        margin: 26px 26px 26px 0;

        .statistics-panel-text {
          line-height: 18px;
          color: rgba(0, 0, 0, 0.45);
          font-size: 16px;
          margin-bottom: 12px;
        }

        .statistics-panel-num {
          margin-top: 5px;
          text-align: right;
          font-size: 15px;

          .actual-inputs{
            color: #4cd964;
          }
          .should-inputs{
            color: #ed4014;
          }

        }
      }
    }
  }

}
</style>
